<template>
  <uni-nav-bar
    title="团惠包详情"
    left-icon="left"
    @clickLeft="redirectTo('index/teamIndex')"
    :fixed="true"
    statusBar
  ></uni-nav-bar>
  <!-- 团名称及创建人/分享人信息 -->
  <view class="package direction-start information">
    <view @click="openEstablish()">
      <text>{{ orderAll.title }}</text>
      <image :src="lookTeam" mode=""></image>
    </view>
    <view>{{ orderAll.des }}</view>
    <image :src="Expired" mode="" v-if="orderAll.status == 2" class="overdueImg"></image>
  </view>
  <view class="center data" style="color:#666;margin-left: 20rpx;" v-if="orderAll.status != 2">
    <view>距结束还剩：</view>
    <uni-section type="line" padding>
      <uni-countdown :second="orderAll.cha_time" :show-colon="false" color="#666" :font-size="16" @timeup="timeup" />
    </uni-section>
  </view>
  <view class="package" style="padding:20rpx 0px">
    <view v-for="(item, index) in orderAll.goods_list" :key="index">
      <!-- 店铺名称 -->
      <view class="space-between shopTop">
        <view class="packageLsit" @click="navTo('shopp/Shopkeeper?id=' + item.store_id)">
          <image src="../../static/groupBenefits/shop.png" mode=""></image>
          <text>{{ item.store_name }}</text>
          <uni-icons type="forward" size="19" color="#666"></uni-icons>
        </view>
      </view>
      <!-- 商品信息 -->
      <ShopList :type="'subsidy'" :shoppAll="item" :show="true" :state="'team'"></ShopList>
    </view>
    <view class="center price" style="padding: 0px 20rpx;box-sizing: border-box;">
      <view style="margin-right: 15rpx;">总价</view>
      <view>
        <text>¥</text>
        <text>{{ orderAll.total_money }}</text>
      </view>
    </view>
  </view>
  <view class="package">
    <view class="title">车友团等级越高补贴越多</view>
    <!-- 团等级价 -->
    <TeamPrice :state="'0'" :priceList="orderAll.price_list" :addNums="'0'"></TeamPrice>
    <view class="firstGroup">
      <text>按照</text>
      <text>{{ orderAll.team_name }}</text>
      <text>享受平台补贴团惠价</text>
      <image :src="Prompt1" mode="" @click="openRiders()"></image>
    </view>
  </view>
  <!-- 奖励说明 -->
  <Reward
    :fx_price="orderAll.fx_price"
    :fxPriceCount="orderAll.fx_price_count"
    :orderID="orderAll.bao_id"
    :title="orderAll.title"
  ></Reward>
  <!-- 分享团 -->
  <MyGroup :bordID="orderAll.bao_id"></MyGroup>
  <!-- 团动态 -->
  <!-- <Trends></Trends> -->
  <ShopBot
    :share="'分享'"
    :state="'details'"
    :bao_id="orderAll.bao_id"
    :teamID="orderAll.team_id"
    :fxID="orderAll.fx_user_id"
    :money="orderAll.money"
    :groupID="orderAll.bao_id"
    :totalMoney="orderAll.total_money"
    :yhPrice="orderAll.yh_money"
    @sharePop="openShare"
    :addNums="0"
    :empty="true"
    :text="'实付'"
  ></ShopBot>
  <!-- 创建团信息弹框 -->
  <uni-popup ref="establishPopup" type="center">
    <Establish
      :name="orderAll.title"
      :Share="orderAll.fx_nickname"
      :establish="orderAll.create_nickname"
      :explain="orderAll.des"
    ></Establish>
  </uni-popup>
  <!-- 车友团信息弹框 -->
  <uni-popup ref="ridersPopup" type="center">
    <Riders :image="orderAll.team_image" :name="orderAll.team_name"></Riders>
  </uni-popup>
  <!-- 微信分享 -->
  <webWechat :path="path" v-if="orderAll.id"></webWechat>
</template>

<script setup lang="ts">
import { navTo, redirectTo } from '@/utils/navigator';
import TeamPrice from '@c/groupBenefits/teamPrice.vue';
import webWechat from '@c/pobulic/webWechat.vue';
import ShopBot from '@c/groupBenefits/DetailBot.vue';
import ShopList from '@c/groupBenefits/shopGrid.vue';
import Reward from '@c/groupBenefits/reward.vue';
import Riders from '@c/groupBenefits/riders.vue';
import MyGroup from '@c/groupBenefits/myGroup.vue';
import Establish from '@c/groupBenefits/establishPop.vue';
import { Expired, Prompt1 } from '@/utils/Static';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import { ref } from 'vue';
import { TeamDetail } from '@/gql/group';
import { getDriverID } from '@/stores/driverID';
const user_id = getDriverID();
const orderAll = ref({});
const orderID = ref(''); //团惠包详情ID
const teamID = ref(''); //团ID
const path = ref('');

const empty = ref(false);

const establishPopup = ref(null);
const ridersPopup = ref(null);
onLoad((pearm) => {
  orderID.value = pearm.id;
  teamID.value = pearm.team;
});
onShow(() => {
  init();
});
/**
 * 获取团惠包初始详情页面
 */
function init() {
  const payload = {
    query: TeamDetail,
    variables: {
      user_id,
      id: Number(orderID.value),
    },
  };
  toPublish('ql/store/getTeamBaoInfo2', payload, (obj: any) => {
    const { get_bao_info2 } = obj.data;
    orderAll.value = get_bao_info2;
    path.value = `https://wx.anlan.tech/#/?from_driver_id=${user_id}&team_id=${teamID.value}&group_id=${
      get_bao_info2.bao_id
    }&type=shareTeam`;
    if (get_bao_info2.status != 2) {
      empty.value = true;
    }
  });
}
/**
 * 倒计时时间到时触发
 */
function timeup() {
  if (orderID.value) {
    init();
  }
}
/**
 * 团惠包信息弹框
 */
function openEstablish() {
  establishPopup.value.open();
}
/**
 * 车友团信息弹框
 */
function openRiders() {
  ridersPopup.value.open();
}
</script>

<style scoped lang="less">
@import url('../groupBenefits/less/groupEditor.less');
</style>
<style>
.data >>> .uni-countdown__splitor {
  color: #666 !important;
}
</style>
